<template>
	<view class="greyBox padTop_20">
		<view class="form">
			<u-form :model="form" ref="uForm" label-width="200">
				<view class="sortTitle">选择港口</view>
				<u-form-item label="启运港" required>
					<u-input required v-model="startHarbor" disabled="true" type="select"
						@click="startHarborShow = true" placeholder="请选择启运港" />
				</u-form-item>
				<u-form-item label="目的港" required>
					<u-input required v-model="endHarbor" disabled="true" type="select" @click="endHarborShow = true"
						placeholder="请选择目的港" />
				</u-form-item>
				<view class="grey"></view>
				<view class="sortTitle">选择出口车辆</view>
				<view class="grey"></view>
				<u-form-item label="车辆信息" prop="warehouew" required>
					<u-input required v-model="carInfo" disabled="true" @click="carModelShow = true"
						placeholder="请选择" />
				</u-form-item>
				<view :class='index == 0?"carInfo marTop_0":"carInfo"' v-for="(item,index) in carInfoList" :key="index">
					<view class="content">
						<view class="name">{{item.label}}</view>
						<view class="remove" @click="removeCar(item,index)">
							<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_delete_supplier@2x.png"
								size="32"></u-icon>
						</view>
						<view class="vinBlock">
							<view class="icon">
								<u-icon name="https://supply.zhongyimotor.com/upload/applet/pic_car_supplier@2x.png"
									size="32"></u-icon>
							</view>
							{{item.value}}
						</view>
					</view>
				</view>
			</u-form>
		</view>
		<view class="actions">
			<u-button type="primary" @click="submit" :disabled="isDisabled">确认提交</u-button>
		</view>
		<u-select v-model="startHarborShow" :list="ports" mode="mutil-column-auto"
			@confirm="confirmStartHarbor"></u-select>
		<u-select v-model="endHarborShow" :list="ports" mode="mutil-column-auto" @confirm="confirmEndHarbor"></u-select>
		<u-select v-model="carModelShow" :list="carPickList" @confirm="confirmCar"></u-select>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import warehouse from '@/components/warehouse.vue';
	import {
		getPortModels
	} from '@/utils/port.js';
	export default {
		components: {
			warehouse
		},
		data() {
			return {
				startHarborShow: false,
				endHarborShow: false,
				carModelShow: false,
				ports: [],
				form: {
					startHarborId: "",
					endHarborId: "",
					vinList: []
				},
				startHarbor: "",
				endHarbor: "",
				carPickList: [], //汽车下拉列表数据
				carInfoList: [], //已选汽车数据
				carList: [], //供应商仓库汽车原始数据
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.getAllHarborInfo();
			this.searchSellerCarList();
		},
		methods: {
			submit() {
				let that = this;
				if (that.startHarbor == "" || that.endHarbor == "") {
					uni.showToast({
						title: '请选择启运港和目的港',
						icon: "none",
						duration: 2000,
					})
					return;
				}
				if (that.carInfoList.length == 0) {
					uni.showToast({
						title: '请选择车辆',
						icon: "none",
						duration: 2000,
					})
					return;
				}
				that.carInfoList.forEach((item) => {
					that.form.vinList.push(item.value)
				});
				let params = that.form;
				that.$api.addExportApply(params).then((res) => {
					uni.showToast({
						title: '提交成功',
						icon: "success",
						duration: 2000,
						success: () => {
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						}
					})
				})
			},
			removeCar(item, index) {
				this.carInfoList.splice(index, 1);
				if (this.carPickList[0].value == "") {
					this.carPickList = [];
				}
				this.carList.forEach(car => {
					if (car.id == item.value) {
						this.carPickList.push({
							label: `${car.brand}-${car.series}-${car.model}`,
							value: car.vin
						});
					}
				})
			},
			confirmCar(e) {
				if (e[0].value != "") {
					let indexP = 0
					this.carPickList.forEach((item, index) => {
						if (e[0].value == item.value) {
							indexP = index
						}
					});
					this.carPickList.splice(indexP, 1);
					if (this.carPickList.length == 0) {
						this.carPickList.push({
							label: "已选择全部车辆",
							value: ""
						});
					}
					this.carInfoList.push(e[0]);
				}
			},
			confirmStartHarbor(e) {
				if (e[2].value == this.form.endHarborId) {
					uni.showToast({
						title: '启运港不能与目的港一致',
						icon: "none",
						duration: 2000,
					})
					return;
				}
				this.form.startHarborId = e[2].value;
				this.startHarbor = e[2].label;
			},
			confirmEndHarbor(e) {
				if (e[2].value == this.form.startHarborId) {
					uni.showToast({
						title: '目的港不能与启运港一致',
						icon: "none",
						duration: 2000,
					})
					return;
				}
				this.form.endHarborId = e[2].value;
				this.endHarbor = e[2].label;
			},
			getAllHarborInfo() {
				let that = this;
				that.$api.getAllHarborInfo().then((res) => {
					that.ports = getPortModels(res.result)
				})
			},
			searchSellerCarList() {
				let that = this;
				that.$api.searchSellerCarList().then((res) => {
					that.carList = res.result
					res.result.forEach((item) => {
						that.carPickList.push({
							label: `${item.brand}-${item.series}-${item.model}`,
							value: item.vin
						})
					})

				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.carInfo {
		padding: 30rpx;
		position: relative;
		margin-top: -40rpx;

		.content {
			display: flex;
			padding: 20rpx 30rpx;
			background: #F8FAFB !important;
			border-radius: 16rpx;
			flex-wrap: wrap;

			.vinBlock {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				.icon {
					margin-top: 5rpx;
					margin-right: 10rpx;
				}
			}

			.name {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #202020;
			}

			.infoBlock {
				margin-left: auto;

				/deep/.u-icon-minus,
				/deep/ .u-icon-plus {
					border-radius: 300rpx;
					width: 40rpx !important;
					height: 40rpx !important;
				}

				/deep/input {
					background: none !important;
					width: 60rpx !important;
				}

			}

			.remove {
				margin-left: auto;
			}
		}

		background: #FFF;
	}



	.form {
		margin-bottom: 20rpx;


		/deep/.u-form-item {
			padding-left: 30rpx;
			padding-right: 30rpx;
			background: #FFF;
			font-size: 34rpx;
		}

		/deep/.u-form-item--left__content {
			padding-left: 10rpx;
		}


	}

	.actions {
		width: 670rpx;
		margin: 60rpx auto;
	}

	.sortTitle {
		padding-left: 30rpx;
		font-size: 26rpx;
		color: #969696;
		height: 46rpx;
		line-height: 36rpx;
	}
</style>